<template>
  <div class="home">
    <div class="header">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="../../assets/images/home/home_background1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../../assets/images/home/home_background2.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 选项卡 -->
      <div class="header-tab">
        <!-- 地址 -->
        <div class="place">
          <div class="bejing">北京</div>
          <div class="replace">
            <div class="buycar">更换购车地</div>
            <span class="iconfont">&#xe604;</span>
          </div>
        </div>
        <!-- 输入框 -->
        <div class="input-box">
          <input
            type="text"
            placeholder="品牌车系/车身类型/其他关键词"
            @click="FnJump"
          />
        </div>
        <!-- 价格 -->
        <div class="condition">
          <div class="price">价格</div>
          <div class="line"></div>
          <div class="car-age">车辆/里程</div>
        </div>
        <!-- 按钮 -->
        <button class="start" @click="FnCarList">开始选车</button>
      </div>
      <!-- 无理由 -->
      <div class="guarantee">
        <div class="reason">
          <img src="../../assets/images/home/home_sevendays.jpg" />
          7天无理由退车
        </div>
        <div class="reason">
          <img src="../../assets/images/home/home_return.jpg" />
          重大问题包退
        </div>
        <div class="reason">
          <img src="../../assets/images/home/home_modify.jpg" />
          1年保修
        </div>
      </div>
      <!-- 类型 -->
      <div class="type">
        <div class="type-header">
          <div class="five">5万以下</div>
          <div class="ten">5-10万</div>
          <div class="fifteen">10-15万</div>
          <div class="twenty">15-20万</div>
          <div class="twenty-five">20万以上</div>
        </div>
        <div class="type-footer">
          <div class="footer-public">
            <img src="../../assets/images/home/home_public.jpg" alt="" />
            <div class="footer-public-wenzi">大众</div>
          </div>
          <div class="footer-volvo">
            <img src="../../assets/images/home/home_Volvo.jpg" alt="" />
            <div class="footer-volvo-wenzi">沃尔沃</div>
          </div>
          <div class="footer-nissan">
            <img src="../../assets/images/home/home_Nissan.jpg" alt="" />
            <div class="footer-nissan-wenzi">日常</div>
          </div>
          <div class="footer-honda">
            <img src="../../assets/images/home/home_Honda.jpg" alt="" />
            <div class="footer-honda-wenzi">本田</div>
          </div>
          <div class="footer-more">
            <img src="../../assets/images/home/home_more.jpg" alt="" />
            <div class="footer-more-wenzi">更多</div>
          </div>
        </div>
      </div>
      <!-- 内容 -->.
      <div class="content">
        <div class="content-left">
          <div class="content-title">
            <img
              src="../../assets/images/home/home_Diamonds.jpg"
              alt=""
              class="icon"
            />
            <div class="self">优信自营</div>
            <span class="iconfont">&#xe601;</span>
            <div class="Seven">七天无理由退车</div>
            <img
              src="../../assets/images/home/home_car.jpg"
              alt=""
              class="car"
            />
          </div>
        </div>
        <div class="content-right">
          <div class="content-title">
            <img
              src="../../assets/images/home/home_label.jpg"
              alt=""
              class="icon"
            />
            <div class="self">卖车</div>
            <span class="iconfont">&#xe601;</span>
            <div class="Seven">孙先生卖了￥3888000</div>
            <img
              src="../../assets/images/home/home_price.jpg"
              alt=""
              class="car"
            />
          </div>
        </div>
      </div>
      <!-- 浏览 -->
      <div class="browse">
        <div class="lately">最近浏览</div>
        <div class="number">
          <div class="quantity">29</div>
          辆车
        </div>
        <span class="iconfont">&#xe604;</span>
      </div>
      <!-- 底部轮播 -->
      <div class="back-silde"></div>
    </div>
    <!-- <div class="footer">
      <FoodTop></FoodTop>
    </div> -->
  </div>
</template>
<script>
// import FoodTop from "../../components/Yejiao.vue";
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转到搜索页
    FnJump() {
       this.$router.push("./Search");
    },
    // 跳转到列表页
    FnCarList(){
       this.$router.push("./CarList");
    }
   
  },

  // components: {
  //   FoodTop,
  // },
};
</script>
<style lang="less" scoped>
/* // css初始化 */
body {
  margin: 0;
}

/* 去掉a的下划线 */
a {
  text-decoration: none;
}

/* 搜索框去除边框 */
input,
button {
  border: 0;
  /* 设置背景颜色为透明 */
  background-color: transparent;
  /* 去掉外轮廓 */
  outline: none;
}

/* 图片的空白间隙 */
img {
  vertical-align: middle;
}

/* // css初始化结束 */
.home {
  width: 750px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8faf9;

  .header::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: absolute;
    overflow: scroll;
    width: 750px;
    height: 319px;
    min-height: 101vh;
    flex: 1;

    /* // 轮播图 */
    .my-swipe .van-swipe-item {
      width: 750px;
      height: 319px;
      color: #fff;
      font-size: 20px;

      img {
        width: 750px;
        height: 319px;
      }

      /* // 小圆点 */
      .van-swipe {
        .van-swipe__indicators {
          position: absolute;
          bottom: 14px;
          left: 50%;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);

          .van-swipe__indicator {
            width: 9px;
            height: 9px;
            background-color: #ffd0b7;
            border-radius: 100%;
            opacity: 0.3;
            -webkit-transition: opacity 0.2s, background-color 0.2s;
            transition: opacity 0.2s, background-color 0.2s;
          }

          .van-swipe__indicator--active {
            width: 26px;
            height: 10px;
            border-radius: 25px;
            color: #fff;
          }
        }
      }
    }

    /* // 选项卡 */
    .header-tab {
      position: relative;
      margin-top: -50px;
      width: 690px;
      height: 543px;
      background-color: #fff;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      box-shadow: 0 3px 3px 3px #f7f1f5;
      margin-left: 30px;
      border-radius: 10px;

      /* // 地址 */
      .place {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 630px;
        height: 111px;
        border-bottom: 3px solid #f1f1f3;
        margin: 0 auto;

        .bejing {
          font-size: 31px;
          color: #0c0e0d;
          font-weight: 700;
        }

        .replace {
          display: flex;
          justify-content: space-around;
          align-items: center;

          .buycar {
            font-size: 26px;
            color: #7f7f7f;
          }

          span.iconfont {
            font-size: 13px;
            color: #dedfe0;
          }
        }
      }

      /* // 输入框 */
      .input-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 630px;
        height: 111px;
        border-bottom: 3px solid #f1f1f3;
        margin: 0 auto;

        input {
          width: 100%;
          font-size: 31px;
          color: #787878;
        }
      }

      /* // 价格 */
      .condition {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 630px;
        height: 111px;
        border-bottom: 3px solid #f1f1f3;
        margin: 0 auto;

        .price {
          font-size: 31px;
          color: #808080;
        }

        .line {
          position: absolute;
          right: 270px;
          width: 1px;
          height: 57px;
          background-color: #f3f5f4;
        }

        .car-age {
          font-size: 31px;
          color: #5b5b5b;
          margin-right: 58px;
        }
      }

      /* //  按钮 */
      .start {
        width: 630px;
        height: 102px;
        line-height: 60px;
        text-align: center;
        border-radius: 50px;
        background-color: #fd7801;
        font-size: 34px;
        color: #fff;
        margin-top: 52px;
        margin-left: 15px;
      }
    }

    /* // 无理由 */
    .guarantee {
      width: 750px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .reason {
        font-size: 21px;
        color: #777777;
        margin-top: 30px;

        img {
          width: 24px;
          height: 26px;
        }
      }
    }

    /* // 类型 */
    .type {
      width: 690px;
      height: 274px;
      background: #fdfffe;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 3px 3px 3px #f7f1f5;
      margin-top: 30px;
      box-sizing: border-box;
      margin-left: 30px;
      border-radius: 10px;

      .type-header {
        width: 690px;
        height: 125px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .five {
          display: inline-block;
          font-size: 24px;
          color: #070707;
        }

        .ten {
          display: inline-block;
          font-size: 24px;
          color: #070707;
        }

        .fifteen {
          display: inline-block;
          font-size: 24px;
          color: #070707;
        }

        .twenty {
          display: inline-block;
          font-size: 24px;
          color: #070707;
        }

        .twenty-five {
          display: inline-block;
          font-size: 24px;
          color: #070707;
        }
      }

      .type-footer {
        width: 690px;
        height: 149px;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .footer-public {
          img {
            width: 56px;
            height: 56px;
          }

          .footer-public-wenzi {
            font-size: 25px;
            color: #5f6260;
            margin-top: 22px;
          }
        }

        .footer-volvo {
          img {
            width: 56px;
            height: 56px;
          }

          .footer-volvo-wenzi {
            font-size: 25px;
            color: #5f6260;
            margin-top: 22px;
          }
        }

        .footer-nissan {
          img {
            width: 56px;
            height: 56px;
          }

          .footer-nissan-wenzi {
            font-size: 25px;
            color: #5f6260;
            margin-top: 22px;
          }
        }

        .footer-honda {
          img {
            width: 56px;
            height: 56px;
          }

          .footer-honda-wenzi {
            font-size: 25px;
            color: #5f6260;
            margin-top: 22px;
          }
        }

        .footer-more {
          img {
            width: 56px;
            height: 56px;
          }

          .footer-more-wenzi {
            font-size: 25px;
            color: #5f6260;
            margin-top: 22px;
          }
        }
      }
    }

    /* // 内容 */
    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      width: 750px;
      height: 360px;
      background: #f8f8f8;
      box-sizing: border-box;
      padding: 0 30px;

      .content-left {
        width: 334px;
        height: 360px;
        // margin-top: 36px;
        background: #ffffff;
        box-shadow: 0 3px 3px 3px #f7f1f5;

        .content-title {
          .icon {
            width: 30px;
            height: 25px;
            margin-left: 24px;
            margin-top: 0px;
          }

          .self {
            display: inline-block;
            font-size: 30px;
            text-align: center;
            color: #1d1d1d;
            font-weight: 700;
            margin-left: 24px;
            margin-top: 25px;
          }

          span.iconfont {
            font-size: 27px;
            color: #f6f6f6;
            margin-left: 74px;
          }

          .Seven {
            font-size: 19px;
            color: #949494;
            margin-left: 22px;
            margin-top: 17px;
          }

          .car {
            width: 300px;
            height: 224px;
            border-radius: 10px;
            margin-left: 25px;
            margin-top: 5px;
          }
        }
      }

      .content-right {
        width: 334px;
        height: 360px;
        // margin-top: 36px;
        background: #ffffff;
        box-shadow: 0 3px 3px 3px #f7f1f5;

        .content-title {
          .icon {
            width: 30px;
            height: 25px;
            margin-left: 24px;
            margin-top: 0px;
          }

          .self {
            display: inline-block;
            font-size: 30px;
            text-align: center;
            color: #1d1d1d;
            font-weight: 700;
            margin-left: 24px;
            margin-top: 25px;
          }

          span.iconfont {
            font-size: 27px;
            color: #f6f6f6;
            margin-left: 140px;
          }

          .Seven {
            font-size: 19px;
            color: #949494;
            margin-left: 22px;
            margin-top: 17px;
          }

          .car {
            width: 300px;
            height: 224px;
            border-radius: 10px;
            margin-left: 25px;
            margin-top: 5px;
          }
        }
      }
    }

    /* // 浏览 */
    .browse {
      display: flex;
      align-items: center;
      width: 690px;
      height: 109px;
      text-align: center;
      background: #ffffff;
      box-shadow: 0 3px 3px 3px #f7f1f5;
      margin-top: 25px;
      margin-left: 30px;
      border-radius: 10px;

      .lately {
        display: inline-block;
        font-size: 30px;
        color: #4c4c4c;
        margin-left: 34px;
      }

      .number {
        display: inline-block;
        margin-left: 373px;
        font-size: 27px;
        color: #686868;

        .quantity {
          display: inline-block;
          font-size: 22px;
          color: #ff3100;
        }
      }

      // span.iconfont {
      // }
    }

    /* // 底部轮播 */
    .back-silde {
      width: 750px;
      height: 1280px;
      background-size: 750px 1280px;
      background: url("../../assets/images/home/home_background.jpg") no-repeat;
      margin-top: 25px;
    }
  }

  .footer {
    position: fixed;
    width: 750px;
    height: 102px;
  }
}
</style>